<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<div class="banner-1" style="background: url(/DJSBlog/static/img/carousel/c-1.jpg) no-repeat 0px 0px;">
</div>
<input type="hidden" class="img_forBanner" value="${bannerImg[0].src}">
<input type="hidden" class="img_forBanner" value="${bannerImg[1].src}">
<input type="hidden" class="img_forBanner" value="${bannerImg[2].src}">
<script>
$(function(){
	$('.banner-1').css({background: "url(/DJSBlog"+$(".img_forBanner").eq(0).val()+") no-repeat 0px 0px" });
	
	setInterval("changeBannerImg()", 10000);
});
var i  = 0;
function changeBannerImg(){
	$('.banner-1').animate({opacity: 'toggle'}, "slow",function(){
		$('.banner-1').css({background: "url(/DJSBlog"+$(".img_forBanner").eq(i).val()+") no-repeat 0px 0px" });
	});
	$('.banner-1').animate({opacity: 'toggle'}, "slow");
	i++;
	if(i == 3) i=0;
}
</script>